<!--
    SplitSelectCell.vue
    gree_ctm

    Created by 汪明 on 17:56.
 -->
<template>
    <view class="SplitSelectCell">
        <view class="title_view">{{ value.activityName }}</view>
        <view class="list_view">
            <view class="item_view" v-for="(item,index) in value.homePageSpecialAdConfigVOList"
                  :style="{marginRight: index == value.homePageSpecialAdConfigVOList.length - 1 ? '0px': '5px'}">
                <image style="width: 100%" mode="widthFix"
                       :src="getConfig().imageURL(item.thumbUrl)"></image>
                <view class="main_title_view">{{ item.mainTitle }}</view>
                <view class="sub_title_view">{{ item.subtitle }}</view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import getConfig from "@/api/config";
import type {SplitSelect} from "@/Types/HomeTypes";
const props = defineProps<{
    value:SplitSelect
}>()
</script>

<style scoped lang="scss">
.SplitSelectCell {
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 12px;
  margin-top: 12px;
  margin-left: 12px;
  margin-right: 12px;
  padding: 12px 12px;

  .title_view {
    font-size: 20px;
    color: black;
    font-weight: 700;
    padding-bottom: 12px;
  }

  .list_view {
    display: flex;
    flex-direction: row;

    .item_view {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 33%;

      .main_title_view {
        padding-top: 10px;
        font-size: 15px;
        color: rgb(51, 51, 51);
        font-weight: 400;
      }

      .sub_title_view {
        padding-top: 5px;
        font-size: 12px;
        color: rgb(153, 153, 153);
        font-weight: 400;
      }
    }
  }
}
</style>
